<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/myInfo.css"/>
		<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
	</head>
	<body>
		<div class="ordertitle">
			<h3><span>我的资料</span></h3>
		</div>			
		

		<ul class='title_header clearfix'>
			<li class='active'>基本资料</li>
			<li>详细资料</li>
		</ul>
		
		<div class='container clearfix'>
			
			<div class="detail">
				
				<div class="header_btn">
					<label><input type="radio" name="image" id="" value="" />选择图像</label>
					<label><input type="radio" name="image" id="" value="" />上传图像</label>
				</div>
				
				<ul class="imgs" >
					<li><img src="./img/pic1.jpg" alt="" /></li>
					<li><img src="./img/pic2.jpg" alt="" /></li>
					<li><img src="./img/pic3.jpg" alt="" /></li>
					<li><img src="./img/pic4.jpg" alt="" /></li>
					<li><img src="./img/pic5.jpg" alt="" /></li>
					<li><img src="./img/pic6.jpg" alt="" /></li>
					<li><img src="./img/pic7.jpg" alt="" /></li>
					<li><img src="./img/pic8.jpg" alt="" /></li>
					<li><img src="./img/pic9.jpg" alt="" /></li>
					<li><img src="./img/pic10.jpg" alt="" /></li>
					<li><img src="./img/pic11.jpg" alt="" /></li>
					<li><img src="./img/pic12.jpg" alt="" /></li>
				</ul>
				
				<ul class="imgs" style="display: none;" >
					<li><input type="file" name="" value='上传文件' /></li>
					<li><img src="" alt=""width="300" height="300" /></li>
				</ul>
				
				<div id="proImg">
					<img src="./img/vancl300.jpg" width="100px" alt="" />
					<input type="button" id='img_btn' value='保存图像'/>
				</div>
				
				<table border="0" cellspacing="0" cellpadding="0">
					<tr><td>*昵称</td><td><input type="" name="" id="" value="" /></td></tr>
					<tr><td>*真实姓名</td><td><input type="" name="" id="" value="" /></td></tr>
					<tr>
						<td>*性    别</td>
						<td>
							<label><input type="radio" name="sex" id="" value="" />男</label>
							<label><input type="radio" name="sex" id="" value="" />女</label>
						</td>
					</tr>
					
					<tr><td>*出生日期</td><td><input type="" name="" id="" value="" /></td></tr>
					<tr><td>*地区</td><td><input type="" name="" id="" value="" /></td></tr>
					<tr><td>*详细地址</td><td><input type="" name="" id="" value="" /></td></tr>
					<tr><td>*电话</td><td><input type="" name="" id="" value="" /></td></tr>
					<tr><td></td><td><input type="submit" value='保 存' class='btn_submit' /></td></tr>
				
				</table>
				
			</div>


			<div class="detail" style="display: none;">
				<table border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td>婚姻状况:</td>
						<td><select name="">
							<option value="">请选择</option>
							<option value="">已婚</option>
							<option value="" selected="selected">未婚</option>
							<option value="" >单身</option>
						</select></td>
					</tr>
					<tr>
						<td>教育程度:</td>
						<td><select name="">
							<option value="">高中及一下</option>
							<option value="">大专</option>
							<option value="">本科</option>
							<option value="">博士</option>
						</select></td>
					</tr>
					<tr>
						<td>从事职业:</td>
						<td><select name="">
							<option value="">企业雇主/企业经营者</option>
							<option value="">高级行政人员</option>
							<option value="">中层管理人员</option>
							<option value="">办公室人员</option>
							<option value="">工人/蓝领</option>
							<option value="">军人</option>
							<option value="">学生</option>
							<option value="">自由职业者</option>
							<option value="">其他</option>
						</select></td>
					</tr>					
					<tr>
						<td>工作所属行业:</td>
						<td><select name="">
							<option value=""></option>
						</select></td>
					</tr>					
					<tr>
						<td>月均收入:</td>
						<td><select name="">
							<option value="">5000元以下</option>
							<option value="">5000-10000</option>
							<option value="">10000-30000</option>
							<option value="">30000-50000</option>
							<option value="">50000以上</option>
						</select></td>
					</tr>	
					
					<tr>
						<td>兴趣爱好:</td>
						<td><textarea name="" rows="5" cols="30"></textarea></td>
					</tr>	
					
					<tr>
						<td>自我介绍:</td>
						<td><textarea name="" rows="5" cols="30"></textarea></td>
					</tr>
					<tr>
						<td><input type="submit" value="保存" class='btn_submit' /></td>
					</tr>
				</table>				
				
			</div>
			
		</div>	

		
		<script type="text/javascript">
			$(function(){
				//选择图像
				$('.imgs li').click(function(){
					var src=$(this).find('img').attr('src');
					$('#proImg').find('img').attr('src',src);
				})
				
				//资料切换
				$('.title_header li').click(function(){
					var i=$(this).index();
					$(this).addClass('active').siblings('li').removeClass('active');
					$('.detail').eq(i).css({'display':'block'}).siblings('.detail').css({'display':'none'})
				})
				
				//上传类型选择
				$('.header_btn label').click(function(){
					var i=$(this).index();
					$('.imgs').eq(i).css('display','block').siblings('.imgs').css('display','none');
				})
				
			})
		</script>
	</body>
</html>
